<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>古诗欣赏</title>
    <style>
        * {
            background-color: pink;
        }

        .timu {
            /* margin-left: 100px;
            margin-top: 20px;
            margin-bottom: 10px; */
            margin: 20px auto 10px 100px;
        }

        .zuozhe {
            margin-left: 81px;
            margin-bottom: 10px;
        }

        .gushi div {
            margin-left: 50px;
            margin-bottom: 10px;
        }

        .zhushi {
            margin-left: -40px;
        }
    </style>
</head>

<body>
    <!-- 诗的主题部分开始-->
    <div class="zhuti">
        <div class="timu">咏柳</div>
        <div class="zuozhe">[唐]贺知章</div>
        <div class="gushi">
            <div>碧玉<sup >[1]</sup>妆<SUP>[2]</SUP>成一树<SUP>[3]</SUP>高,</div>
            <div>万条垂下绿丝绦<SUP>[4]</SUP>。</div>
            <div><INS>不知细叶谁裁出,</INS></div>
            <div><INS>二月春风似剪刀。</INS></div>
        </div>

    </div>
    <!-- 诗的主题部分结束-->
    <!-- 分割线 -->
    <hr>
    <!-- 诗词注解部分开始 -->
    <ul>
        
        <li><strong>诗词注释</strong></li>
        <dl>
            <div class="zhushi">
                <dd>[1]碧玉，碧绿色的玉。这里用以比喻春天嫰绿的柳叶。</dd>
                <dd>[2]碧玉，碧绿色的玉。这里用以比喻春天嫰绿的柳叶。</dd>
                <dd>[3]碧玉，碧绿色的玉。这里用以比喻春天嫰绿的柳叶。</dd>
                <dd>[4]碧玉，碧绿色的玉。这里用以比喻春天嫰绿的柳叶。</dd>
            </div>


        </dl>

        <!-- 诗词注解部分结束 -->
        <hr color="pink">
        <!-- 画线诗句译文部分开始 -->
        <li><strong>划线诗句译文</strong></li>
        <dl>

            <div class="zhushi">
                <dd><em>这细细的嫩叶是谁的巧手裁剪出来的呢？原来是哪二月里温暖的春风，他就像一把灵巧的剪刀。</em></dd>
            </div>

        </dl>
        <!-- 画线诗句译文部分结束 -->
    </ul>

</body>

</html>